<!--
* description: 区域仓库信息查询
* author: duanhy
* createdDate: 2020-11-16
-->
<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="dynamicApiConfig"
      :dynamic-buttons="dynamicButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="dynamicTableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-show-select="false"
      :dynamic-export-converts="dynamicExportConverts"
      :refresh-table-key="refreshTableKey"
      :callback-obj="callbackObj"
      @hiddenColData="hiddenColData"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import api from '@/api/apiVeData'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'

export default {
  name: 'Regioninfo',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      }
    )
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      refreshTableKey: '0',
      dynamicApiConfig: api.queryRegionalWarehome,
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey0',
              labelName: '仓库编码',
              codeField: 'areaStockCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey1',
              labelName: '仓库名称',
              codeField: 'areaStockName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey2',
              labelName: '启用状态',
              codeField: 'isEnableCode',
              component: () => import('@/components/org/isEnable/isEnableOne'),
              type: 'dropdownList',
              isMust: true,
              span: this.spanNum()
            }
          ],
      // form 的表单对象
      formField: this.$utils.getFormField(
        this,
        {
          areaStockCode: '',
          areaStockName: '',
          isEnableCode: '1'
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      // 动态组件-按钮
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              name: 'search',
              clickEvent: () => this.queryTable(1),
              text: '查询'
            },
            {
              compKey: 'btnKey2',
              type: '',
              size: 'small',
              name: 'reset',
              clickEvent: () => this.reset(),
              text: '重置'
            }
          ],
      // 动态组件-表格网格列
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
            {
              prop: 'areaStockId',
              label: '区域仓库id',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'areaStockCode',
              label: '区域仓库编码'
            },
            {
              prop: 'areaStockName',
              label: '区域仓库名称'
            },
            // {
            //   prop: 'stockVlCode',
            //   label: '物流仓库编码'
            // },
            {
              prop: 'stockAdmin',
              label: '管理员姓名'
            },
            {
              prop: 'stockAdminPhone',
              label: '管理员电话'
            },
            {
              prop: 'stockFax',
              label: '传真'
            },
            {
              prop: 'stockPostcode',
              label: '邮编'
            },
            {
              prop: 'stockProvince',
              label: '省份'
            },
            {
              prop: 'stockCity',
              label: '城市'
            },
            {
              prop: 'stockCounty',
              label: '区县'
            },
            {
              prop: 'stockAddress',
              label: '详细地址'
            },
            // {
            //   prop: 'zbStockCode',
            //   label: '所属总部仓库编码'
            // },
            // {
            //   prop: 'zbStockName',
            //   label: '所属总部仓库名称'
            // },
            {
              prop: 'isEnableCode',
              label: '启用状态'
            },
            {
              prop: 'stockRemark',
              label: '备注'
            }
          ],
      // 字段格式化转换（用于导出excel）（kvs表示键值转换）
      dynamicExportConverts: {
        isEnable: {
          convert: 'kvs',
          kvs: {
            '1': '是',
            '0': '否'
          }
        }
      },
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.handleSelectionChange(selection)
        }
      }
    }
  },
  mounted() {
    // 列表查询
    const that = this
    setTimeout(function() {
      that.queryTable(1)
    }, 0)
  },
  methods: {
    spanNum() {
      return 6
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.dynamicButtons.filter((o) => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    },

    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    }
  }
}
</script>
